<template>
  <div class="anual-editor">
    <PageTemplate>
      <div slot="content">
         <el-form
          :model="budgetInfo"
          label-position="right"
          label-width="120px"
          class="page-edit-colllapse-form"
          ref="budgetInfo">
          <el-row>
            <el-col :span="24">
              <el-form-item label="预算年度" prop="year">
                  <span>{{budgetInfo.year}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="预算明细">
                <el-table
                  class="table"
                  border
                  ref="tables"
                  :data="tables"
                  tooltip-effect="dark"
                  style="width: 100%"
                  :show-overflow-tooltip="true"
                  :header-cell-style="{background:tableHeaderBGC}" >
                  <el-table-column prop="title" label="" align="center"></el-table-column>
                  <el-table-column prop="travelExpense" label="差旅费" align="center"></el-table-column>
                  <el-table-column prop="meetingExpense" label="会议费" align="center"></el-table-column>
                  <el-table-column prop="consultingExpense" label="咨询费" align="center"></el-table-column>
                  <el-table-column prop="businessSupportExpense" label="业务支持费" align="center"></el-table-column>
                  <el-table-column prop="deviceExpense" label="设备费" align="center"></el-table-column>
                  <el-table-column prop="softwareExpense" label="软件费" align="center"></el-table-column>
                  <el-table-column prop="totalExpense" label="总额" align="center"></el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="">
                  <el-link type="primary" @click="lookApplyDetail">查看预算申请明细</el-link>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row class="row-empty-10"></el-row>
        <el-row>
          <el-button type="primary" @click="back">
            {{$t('cm.return')}}
          </el-button>
        </el-row>
      </div>
    </PageTemplate>
  </div>
</template>

<script>
import { ALERT } from '@/utils/responseHandle'
import * as Constant from '@/utils/constant'
import PageTemplate from '@/components/common/PageTemplate'
import HasBtn from '@/mixins/HasBtn'
import { mapState } from 'vuex'
import {COMMON} from '@/utils/commonUtil'
import api_sri from '@/api/api_sri'
export default {
  components: {
    PageTemplate, 
  },
  data () {
    return {
      budgetInfo: {},
      tables:[]
    }
  },
  watch: {
    
  },
  computed: {
    ...mapState({
      tableHeaderBGC: state => state.common.tableHeaderBGC
    })
  },
  created () {
    this.getData();
  },
  methods: {
    getData(){
       api_sri.sriGainBudgetInfo({
         id:this.$router.history.current.params.id
       }, result => {
        if (result.code === Constant.RT_SUCCESS) {
          const { budgetInfo,left,used } = result.data;
          this.budgetInfo = budgetInfo;
          this.tables = [
            Object.assign({},budgetInfo,{title:"预算"}),
            Object.assign({},used,{title:"预算申请"}),
            Object.assign({},left,{title:"差额"})
          ]
        } else {
          ALERT.error(result.msg)
        }
      })

    },
    //返回
    back(){
      this.$router.go(-1);//返回上一层
    },
    //查看预算申请明细
    lookApplyDetail(){
      COMMON.routerTo(Constant.ROUTE_SRI_BUDGET_APPLY_Q.index, this.$router, { year: this.budgetInfo.year})
    },
   
   
  },
}
</script>

<style lang="scss">
.anual-editor{
  .el-form{
    background: #fff;
    padding-top: 20px;
    padding-right: 30px;
  }
}
</style>
